<template>
  <div class="content">
    <div class="list">
      <div class="listNav">
        <div class="select">
          <span v-for="(item, idx) in hotList" @click="toHot(idx)" :key="idx" :class="{ active: item.isActive }">{{
              item.title
          }}</span>
        </div>
        <a href="">
          <div class="box">
            <span class="iconfont icon-xiazai down">
            </span>
            <span class="detail">下载Windows客户端<i>流畅上网不卡顿</i></span>
          </div>
        </a>
        <a href="">
          <div class="box">
            <span class="iconfont icon-xiazai down">
            </span>
            <span class="detail">下载Windows客户端<i>流畅上网不卡顿</i></span>
          </div>
        </a>

      </div>

      <div class="listCont">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { getHot } from "@/api";

export default {
  name: "person",
  components: {},
  data() {
    return {
      hotList: [],
    };
  },
  created() {
    getHot().then((res) => {
      this.hotList = res.data;
    });
    
  },
  methods: {
    toHot(i) {
      this.$router.push({
        name: this.hotList[i].name
      }).catch((err) => { });
      this.hotList.forEach((val) => {
        val.isActive = false;
      });
      this.hotList[i].isActive = true;
    },
  },
};
</script>

<style lang="less" scoped>
a{
  text-decoration: none;
  color: black;
}
.content {
  background: #f4f4f4;
  width: 100%;
  height: 100%;

  .list {
    display: flex;
    width: 1000px;
    margin: 0 auto;
    padding-top: 40px;

    .listNav {
      width: 250px;
      display: flex;
      flex-direction: column;
      width: 200px;
      margin-right: 20px;
      overflow: hidden;

      .select {
        overflow: hidden;
        background: #fff;
        height: 550px;

        span {
          margin: 4px 0;
          cursor: pointer;
          height: 45px;
          line-height: 45px;
          text-indent: 20px;
          display: block;

          &:hover {
            color: #23b8ff;
            border-left: 3px solid #ccc;
          }
        }
      }

      .box {
        display: flex;
        border: 1px solid #ccc;
        margin-top: 20px;
        padding: 5px;

        .down {
          font-size: 40px;
          color: rgb(102, 93, 93);
        }

        .detail {
          font-size: 14px;

          i {
            font-size: 10px;
            color: rgb(102, 93, 93);
          }
        }

      }

      .active {
        border-left: 3px solid #23b8ff;
        color: #23b8ff;

        &:hover {
          border-left: 3px solid #23b8ff !important;
        }
      }
    }
  }
}
</style>
